<template>
  <img class="avatar-container" :src="url" alt="" :style="{
    width:size +'px',
    height: size +'px'
  }" 
  />
</template>

<script>
export default {
  props: {
    url: { 
    String,
    required: true,
  },
  size: {
    type : Number,
    default:150
  }
}
};
</script>

<style scoped>
/* 带有作用域 */
  .avatar-container {
    display: block;
    border-radius: 50%;
    object-fit: cover;
  }
</style>